<template>
    <div class="main">

        <div class="button-div">
            <div class="monthly-yearly-statistics">
                <button
                    v-for="(button, index) in buttons"
                    :key="index"
                    :class="['custom-button', { 'selected': button.selected }]"
                    @click="selectButton(button.index)"
                >
                    {{ button.label }}
                </button>
            </div>
        </div>

        <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag == 1" ref="charts" />
        <Echart id="leftCenter" :options="options2" class="left_center_inner" v-if="pageflag == 2" ref="charts" />
    </div>
</template>

<script>
import {currentGET} from "api";
export default {
    data() {
        return {
            ProvDayData: [],
            ProvMonthData: [],
            ProvYearData: [],
            buttons: [
                {label: '日统计', selected: true, index: 0},
                {label: '月统计', selected: false, index: 1},
                {label: '年统计', selected: false, index: 2}
            ],
            // 配置图表的选项
            options: {
                grid: {
                    top: 70,
                    // left: 50,
                    right: 30,
                    bottom: 40,
                },
                // 设置图表的标题
                // title: {
                //     // text: '客流量数据柱状图',
                //     text: '日客流量：233人',
                //     textStyle: {
                //         color: '#d9fcfb', // 设置标题颜色为红色
                //     },
                //     top: 15,
                //     left: 50,
                // },
                // 设置 x 轴的配置
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#fff",
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false, // 去掉 x 轴的线
                    },
                    data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
                },
                // 设置 y 轴的配置
                yAxis: {
                    axisLabel: {
                        color: "#fff",
                    },
                    splitLine: {
                        show: true, // 显示 y 轴的背景横线
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.1)", // 设置颜色为白色，并设置透明度为 0.5
                            type: "solid", // 设置为实线
                        },
                    },
                },
                // 设置柱状图的系列数据
                series: [
                    {
                        name: '2023',
                        type: 'pictorialBar',
                        // barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/
                        barWidth: 15,
                        symbol: 'path://M0,40 L40,40 C20,40 20,15 15,0 C10,15 10,40 0,40 z',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0, color: 'rgba(148, 193, 230, 1)' // 起始颜色，顶部颜色
                                        },
                                        {
                                            offset: 1, color: 'rgba(15, 34, 59, 1)' // 结束颜色，底部颜色
                                        }
                                    ]
                                },
                                label: {
                                    formatter: "{c}" + "人",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        // fontWeight: "bolder",
                                        fontSize: "12",
                                        color: "rgba(142, 191, 232)"
                                    }
                                },
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                opacity: 1
                            }
                        },
                        data: [1200, 1500, 1700, 1300, 1200, 1300, 1400, 1300, 1400, 1500, 1400, 1200],
                    },
                ],
            },
            options2: {
                grid: {
                    top: 70,
                    // left: 50,
                    right: 30,
                    bottom: 40,
                },
                // 设置图表的标题
                // title: {
                //     // text: '客流量数据柱状图',
                //     text: '日客流量：233人',
                //     textStyle: {
                //         color: '#d9fcfb', // 设置标题颜色为红色
                //     },
                //     top: 15,
                //     left: 50,
                // },
                // 设置 x 轴的配置
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#fff",
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false, // 去掉 x 轴的线
                    },
                    data: [],
                },
                // 设置 y 轴的配置
                yAxis: {
                    axisLabel: {
                        color: "#fff",
                    },
                    splitLine: {
                        show: true, // 显示 y 轴的背景横线
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.1)", // 设置颜色为白色，并设置透明度为 0.5
                            type: "solid", // 设置为实线
                        },
                    },
                },
                // 设置柱状图的系列数据
                series: [
                    {
                        name: '2023年',
                        type: 'pictorialBar',
                        // barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/
                        barWidth: 15,
                        symbol: 'path://M0,40 L40,40 C20,40 20,15 15,0 C10,15 10,40 0,40 z',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0, color: 'rgba(148, 193, 230, 1)' // 起始颜色，顶部颜色
                                        },
                                        {
                                            offset: 1, color: 'rgba(15, 34, 59, 1)' // 结束颜色，底部颜色
                                        }
                                    ]
                                },
                                label: {
                                    formatter: "{c}" + "人",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        // fontWeight: "bolder",
                                        fontSize: "12",
                                        color: "rgba(142, 191, 232)"
                                    }
                                },
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                opacity: 1
                            }
                        },
                        data: [1000, 1200, 900, 800, 1100, 1300, 1500, 1700, 1900],
                    },
                    {
                        name: '2024年',
                        type: 'pictorialBar',
                        // barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/
                        barWidth: 15,
                        symbol: 'path://M0,40 L40,40 C20,40 20,15 15,0 C10,15 10,40 0,40 z',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0, color: 'rgba(217, 181, 142, 1)' // 起始颜色，顶部颜色
                                        },
                                        {
                                            offset: 1, color: 'rgba(27, 36, 51, 1)' // 结束颜色，底部颜色
                                        }
                                    ]
                                }, label: {
                                    formatter: function(params) {
                                        if (params.value === 0) {
                                            return ''; // 数据为 0 时不显示标签
                                        } else {
                                            return params.value + "人";
                                        }
                                    },
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        // fontWeight: "bolder",
                                        fontSize: "12",
                                        color: "rgba(237, 190, 126)"
                                    }
                                },
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                opacity: 1
                            }
                        },
                        data: [],
                    }
                ],
                // 设置图例，用于显示柱状图的系列名称
                legend: {
                    left: 50,
                    top: 20,
                    orient: 'horizontal',
                    textStyle: {
                        color: "#c7e3f9",
                    },
                    icon: 'circle',
                    data: [
                        {
                            name: '2023年',
                            icon: 'image://',
                        },
                        {
                            name: '2024年',
                            icon:'image://',
                        },
                    ],
                    itemWidth: 12, // 设置图例图标的宽度
                    itemHeight: 12 // 设置图例图标的高度
                },
            },
            // 显示隐藏变量
            pageflag: 1,
        };
    },
    created() {
        this.dailyStatistics()
    },
    mounted() {
    },
    beforeDestroy() {

    },
    methods: {

        getProvDay() {
            let orgId = this.$route.query.cityId;
            currentGET("getMuseumDay", {orgId})
                .then((res) => {
                    if (res.success) {
                        this.ProvDayData = res.data;
                        console.log(this.ProvDayData, 'this.ProvDayData');

                        let hours = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];

                        let result = hours.map((hour) => {
                            let obj = this.ProvDayData.find(function(item) {
                                return item.hour === hour;
                            });

                            if (obj) {
                                return obj.value;
                            } else {
                                return 0;
                            }
                        });

                        this.options.series[0].data = result
                        this.options2.series[0].data = result
                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },
        getProvMonth() {
            let orgId = this.$route.query.cityId;
            currentGET("getMuseumMonth", {orgId})
                .then((res) => {
                    if (res.success) {
                        this.ProvMonthData = res.data;
                        console.log(JSON.parse(JSON.stringify(this.ProvMonthData)), 'this.ProvMonthData');

                        // 获取数组中的两个年份
                        var uniqueYears = [...new Set(this.ProvMonthData.map(obj => obj.year))];
                        var year1 = uniqueYears[0];
                        var year2 = uniqueYears[1];

                        var array1 = [];
                        var array2 = [];

                        this.ProvMonthData.forEach(function(obj) {
                            if (obj.year === year1.toString()) {
                                array1.push(obj.value);
                            } else if (obj.year === year2.toString()) {
                                array2.push(obj.value);
                            }
                        });

                        console.log(array1); // 较小年份对应的值数组
                        console.log(array2); // 较大年份对应的值数组

                        // 格式化 month 属性为 xx月 的形式
                        var formattedMonths = this.ProvMonthData.map(function(obj) {
                            return obj.month + "月";
                        });

                        console.log(formattedMonths); // 格式化后的月份数组

                        // 在 array2 开头添加与 array1 长度相同的值为0的元素
                        var array1Length = array1.length;
                        var zerosArray = Array(array1Length).fill(0);
                        array2 = zerosArray.concat(array2);

                        console.log(array2); // 在开头添加0值后的 array2 数组

                        this.options2.series[0].name = year1;
                        this.options2.legend.data[0].name = year1;
                        this.options2.series[0].data = array1;
                        this.options2.series[1].name = year2;
                        this.options2.legend.data[1].name = year2;
                        this.options2.series[1].data = array2;
                        this.options2.xAxis.data = formattedMonths;


                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },

        getProvYear() {
            let orgId = this.$route.query.cityId;
            currentGET("getMuseumYear", {orgId})
                .then((res) => {
                    if (res.success) {
                        this.ProvYearData = res.data;
                        console.log(JSON.parse(JSON.stringify(this.ProvYearData)), 'this.ProvYearData');

                        var years = [];
                        var values = [];

                        this.ProvYearData.forEach(function(obj) {
                            years.push(obj.year);
                            values.push(obj.value);
                        });

                        console.log(years); // 存储所有年份的数组
                        console.log(values); // 存储所有值的数组

                        this.options.series[0].data = values;
                        this.options.xAxis.data = years;

                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },

        selectButton(index) {
            console.log(index)
            this.buttons.forEach((button, i) => {
                button.selected = i === index;
            });
            if (index === 0) {
                this.dailyStatistics();
            } else if (index === 1) {
                this.monthlyStatistics();
            } else if (index === 2) {
                this.yearStatistics();
            }
        },

        // 日统计
        dailyStatistics() {
            this.clearLandscapeFormat();
            // this.options.series[0].data = [1200, 1500, 1700, 1300, 1200, 1300, 1400, 1300, 1400, 1500, 1400, 1200];
            // this.options.xAxis.data = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'];
            this.getProvDay();
        },
        // 月统计
        monthlyStatistics() {
            // this.clearLandscapeFormat();
            this.pageflag = 2;
            // this.options3.series[0].data = [5000, 7500, 8000, 9000, 9500, 10000, 13000, 14000, 15000];
            // this.options3.series[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 16000, 17000, 18000];
            // this.options3.xAxis.data = ["4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", "1月", "2月", "3月"];
            this.getProvMonth();
        },
        // 年统计
        yearStatistics() {
            this.clearLandscapeFormat();
            // this.options.series[0].data = [12000, 7500, 8000, 9000, 9500, 10000, 13000, 14000, 15000, 16000, 17000];
            // this.options.xAxis.data = ['2019', '2020', '2021', '2022', '2023', '2024'];
            this.getProvYear();
        },

        // 清除格式
        clearLandscapeFormat(){
            this.pageflag = 1;
        }
    },
};
</script>
<style lang='scss' scoped>
.main {
    width: 100%;
    height: 95%;
    display: flex;
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-end;
}

.button-div {
    z-index: 99;
    position: absolute;
    display: flex;

    .monthly-yearly-statistics {
        position: relative;
        top: 15px;
        //right: 81px;
    }

    .custom-button {
        background: linear-gradient(to bottom, #3c526d, #091c39);
        width: 50px;
        height: 18px;
        color: white;
        border: none;
        padding: 6px 13px;
        font-size: 12px;
        margin-right: 5px;
        transition: background 0.3s ease, transform 0.3s;
        border-radius: 4px; /* 添加圆角 */
    }
}

.custom-button:hover {
    background: linear-gradient(to bottom, #091c39, #3c526d);
    transform: scale(1.01);
}

.custom-button.selected {
    background: linear-gradient(to bottom, #8aafd4, #13355f);
    //transform: scale(1.1);
}
</style>
